<template>
  <div>
    <div class="main-content">
      <h4 class="m-b-10" v-if="userName">
        [{{ userName }}] 的注册资格
      </h4>
      <el-table border :data="tableData" style="width: 100%" max-height="300">
        <el-table-column v-for="(column, index) in cloumns" :width="column.width" :label="column.label"
          :align="column?.align || 'center'" :key="index" :fixed="column.fixed">
          <template slot-scope="scope">
            <template v-if="column?.type === 'operate'">
              <el-button @click.native.prevent="editTableData(scope.row)" type="text" size="small">编辑</el-button>
              <el-button @click.native.prevent="deleteTabelData(scope.row)" type="text" size="small">删除</el-button>
            </template>
            <span v-else>
              {{ scope.row[column.prop] }}
            </span>
          </template>
        </el-table-column>
      </el-table>
    </div>


    <el-form class="main-content" ref="qualificationForm" :model="form" label-width="100px" style="margin-top: 20px"
      :rules="rules">
      <el-row>
        <el-col :span="6">
          <el-form-item label="体系:" prop="structure">
            <el-select class="w" v-model="form.structure" clearable placeholder="请选择体系">
              <el-option v-for="(item, index) in structureOptions" :key="index" :label="item.label"
                :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="4">
          <el-form-item label="标准:" prop="standard">
            <el-checkbox v-for="(item, index) in qualificationStandard" :key="index" v-model="form.standard"
              :label="item.value">
              {{ item.label }}
            </el-checkbox>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="日期:" prop="qmsTime">
            <el-date-picker v-model="form.qmsTime" type="date" placeholder="请选择日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="资格:" prop="qualification">
            <el-select class="w" clearable v-model="form.qualification" placeholder="资格">
              <el-option v-for="(item, index) in qualificationOptions" :key="index" :label="item.label"
                :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="资格注册号:" prop="registNum">
            <el-input class="w" v-model="form.registNum" placeholder="请输入资格注册号"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="开始时间:" prop="startTime">
            <el-date-picker class="w" type="date" placeholder="选择开始时间" v-model="form.startTime"></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="结束时间:" prop="endTime">
            <el-date-picker class="w" type="date" placeholder="选择结束时间" v-model="form.endTime"></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="组长与否:" prop="leadType">
            <el-radio-group v-model="form.leadType">
              <el-radio v-for="item in qualificationLeadType" :key=item.key :label="item.value">{{ item.name
                }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="能否做见证:" prop="witness">
            <el-checkbox-group v-model="form.witness">
              <el-checkbox v-for="item in qualificationWitnessType" :key="item.key" :label="item.value">{{ item.name
                }}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="暂停资格:" prop="suspension">
            <el-radio-group v-model="form.suspension">
              <el-radio label="是" value="yes"></el-radio>
              <el-radio label="否" value="no"></el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="备注" prop="remark">
            <el-input class="w" type="textarea" v-model="form.remark"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item size="large">
        <el-button type="primary" @click="onSubmit">保存</el-button>
        <el-button type="default" @click="back">返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>

import { createQualification, getQualificationByPid } from "../../api/qualification";
import { getPersonnelById } from "../../api/personnel";
import {
  QualificationStandard, QualificationLeadType, QualificationWitnessType, structureOptions, qualificationOptions,
  suspensionOptions, leadTypeOptions, getOptionLabel, getTimeValue
} from "../../utils/qualificationData";

export default {
  name: "HrQualificationDetail",
  data() {
    return {
      qualificationStandard: QualificationStandard,
      qualificationLeadType: QualificationLeadType,
      qualificationWitnessType: QualificationWitnessType,
      qualificationOptions: qualificationOptions,
      structureOptions: structureOptions,

      cloumns: [
        {
          label: '状态',
          width: '120px',
          prop: 'userName',
        }, {
          label: '体系',
          width: '120px',
          prop: 'structure',
        }, {
          label: '标准',
          width: '120px',
          prop: 'standard',
        }, {
          label: '资格',
          width: '120px',
          prop: 'qualification',
        }, {
          label: '资格证编号',
          width: '120px',
          prop: 'registNum',
        }, {
          label: '组长与否',
          width: '120px',
          prop: 'leadType',
        }, {
          label: '见证',
          width: '120px',
          prop: 'witness',
        }, {
          label: '暂停',
          width: '120px',
          prop: 'suspension',
        }, {
          label: '开始时间',
          width: '150px',
          prop: 'startTime',
        }, {
          label: '结束时间',
          width: '150px',
          prop: 'endTime',
        }, {
          label: '备注',
          width: '150px',
          prop: 'remark',
        }, {
          label: '操作',
          width: '',
          align: 'left',
          fixed: 'right',
          type: 'operate',
        }
      ],

      form: {
        structure: '',
        standard: '',
        qmsTime: '',
        qualification: '',
        registNum: '',
        startTime: '',
        endTime: '',
        leadType: 0,
        witness: [],
        suspension: '',
        remark: '',
      },

      rules: {
        company: [
          { required: true, message: "请输入企业名称", trigger: "blur" },
        ],
        cid: [{ required: true, message: "请输入合同编号", trigger: "blur" }],
        name: [{ required: true, message: "请输入开户名称", trigger: "blur" }],
        account: [
          { required: true, message: "请输入银行账户", trigger: "blur" },
        ],
        bank: [{ required: true, message: "请输入开户银行", trigger: "blur" }],
        phone: [{ required: true, message: "请输入开户电话", trigger: "blur" }],
        address: [
          { required: true, message: "请输入开户地址", trigger: "blur" },
        ],
        tid: [{ required: true, message: "请输入公司税号", trigger: "blur" }],
        vote: [
          { required: true, message: "请输入公司税号", trigger: "change" },
        ],
      },

      tableData: [],
      userName: null,
    };
  },

  created() {
    this.getPersonnelById();
    this.getQualificationByPid();
  },

  methods: {

    async getPersonnelById() {
      const { pid } = this.$route.query;
      const res = await getPersonnelById({ id: pid });
      const { data } = res?.data;
      const { userName } = data;
      this.userName = userName;
    },


    async getQualificationByPid() {
      const { pid } = this.$route.query;
      const res = await getQualificationByPid({ pid });
      const { data } = res?.data;
      this.tableData = data?.map(item => {
        return {
          ...item,
          suspension: getOptionLabel(item.suspension, suspensionOptions),
          leadType: getOptionLabel(item.leadType, leadTypeOptions),
          standard: getOptionLabel(item.standard, QualificationStandard),
          startTime: getTimeValue(item.startTime),
          endTime: getTimeValue(item.endTime),
          originData: item,
        }
      });
    },

    async handleSubmit() {
      const { uid, pid } = this.$route.query;
      const { standard, witness } = this.form;
      const params = {
        ...this.form,
        standard: standard ? 1 : 0,
        witness: witness.length > 0 ? witness.join(',') : null,
        uid,
        pid
      }
      const res = await createQualification(params);
      const { code, message } = res.data;
      if (code === 0) {
        this.$message({
          message,
          type: "success",
        });
        this.back();
        this.$refs["qualificationForm"].resetFields();
      }
    },


    async onSubmit() {
      this.$refs["qualificationForm"].validate((valid) => {
        if (valid) {
          this.handleSubmit();
        }
      });
    },

    editTableData(row) {
      const { originData } = row;
      for (let key in this.form) {
        if (key === 'standard') {
          this.form[key] = Boolean(Number(originData[key]));
        } else {
          this.form[key] = originData[key];
        }
      }
    },

    deleteTabelData(row) {
      console.log(row);
    },


    back() {
      this.$router.go(-1);
    },


  },
};
</script>

<style scoped>
.w {
  width: 100%;
}
</style>